import React, { Component, lazy, Suspense } from 'react';
import { Layout } from 'antd';
import { Route, Switch, Redirect } from 'react-router-dom';
import WHeader from './com/header'
import WFooter from './com/footer'
import { BackTop } from 'antd';
import styles from './index.module.scss'
import WLoading from '../../components/loading'

const { Header, Footer, Content } = Layout;

interface StateInterface {
}

interface PropsInterface {
}

const HomePage = lazy(() => import('./home'))
const MePage = lazy(() => import('./me'))
const StudyPage = lazy(() => import('./study'))
const ProductPage = lazy(() => import('./product'))
const PackagePage = lazy(() => import('./package'))
const FeedbackPage = lazy(() => import('./feedback'))
const ToolPage = lazy(() => import('./tool'))

class Web extends Component {

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    return (
      <Layout>
        <Header>
          <WHeader />
        </Header>
        <Content className={`${styles.content}`}>
          <Suspense fallback={<WLoading height='calc(100vh - 162px)'/>}>
            <Switch>
              <Route exact path="/web/me" component={MePage} />
              <Route path="/web/study" component={StudyPage} />
              <Route path="/web/product" component={ProductPage} />
              <Route path="/web/package" component={PackagePage} />
              <Route exact path="/web/feedback" component={FeedbackPage} />
              <Route exact path="/web/tool" component={ToolPage} />
              <Route exact path="/" component={HomePage} />
              <Redirect to="/"></Redirect>
            </Switch>
          </Suspense>
        </Content>
        <Footer className={ styles['web-footer'] }>
          <BackTop visibilityHeight={100} />
          <WFooter />
        </Footer>
      </Layout>
    );
  }
}

export default Web;
